<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>艾宾浩斯记单词</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            text-align: center;
            font-family: "Microsoft YaHei", Arial, sans-serif;
            background-color: #f4f6f9;
            padding: 20px;
        }

        .word-container {
            font-size: 2em;
            font-weight: bold;
            color: #333;
            background: #fff;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            display: inline-block;
            margin: 30px auto;
            width: 50%;
        }

        .btn-group {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }

        button, select {
            padding: 15px 25px;
            font-size: 1.1em;
            font-weight: bold;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        button:hover {
            transform: scale(1.05);
        }

        #known {
            background-color: #4CAF50;
            color: white;
        }

        #unknown {
            background-color: #FF5722;
            color: white;
        }

        #next {
            background-color: #2196F3;
            color: white;
        }

        #book-selector {
            background-color: #607D8B;
            color: white;
        }

        button i {
            font-size: 1.2em;
        }

        .select-bar {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            margin-top: 20px;
            margin-bottom: 30px;
        }

        .select-bar label {
            font-weight: bold;
            font-size: 1.1em;
            color: #333;
        }

        .select-bar select {
            padding: 12px 20px;
            font-size: 1em;
            border-radius: 8px;
            border: 1px solid #ccc;
            box-shadow: 0 2px 6px rgba(0,0,0,0.1);
        }

        #details {
            max-width: 800px;
            margin: 20px auto;
            text-align: left;
            padding: 20px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            line-height: 1.6em;
            color: #333;
        }

        #details p {
            margin-bottom: 15px;
        }

        #details em {
            color: #666;
        }
    </style>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
    <h1 style="color: #333;">🧠 艾宾浩斯记单词</h1>

    <div class="select-bar">
        <button id="review-btn" style="background-color: #FFC107; color: white; padding: 12px 20px; border-radius: 8px; border: none; font-weight: bold; font-size: 1em; cursor: pointer;">复习</button>
        <label for="book-select">选择单词书：</label>
        <select id="book-select"></select>
    </div>

    <div class="word-container" id="word">加载中...</div>

    <div class="btn-group">
        <button id="known"><i class="fas fa-check-circle"></i> 认识</button>
        <button id="unknown"><i class="fas fa-times-circle"></i> 不认识</button>
        <button id="next"><i class="fas fa-forward"></i> 下一个</button>
    </div>

    <div id="details"></div>

    <script>
        let currentBook = "";
        let currentWord = "";
        let currentWordData = null;

        function loadBooks() {
            $.get("/list_books", function(data) {
                const selector = $("#book-select");
                selector.empty();
                data.books.forEach(book => {
                    selector.append(`<option value="${book}">${book}</option>`);
                });
                if (data.books.length > 0) {
                    currentBook = data.books[0];
                    fetchWord();
                }
            });
        }

        function fetchWord() {
            $.get("/get_word", { book: currentBook }, function(data) {
                currentWord = data.word;
                currentWordData = data;
                $("#word").text(currentWord);
                $("#details").html("");
            });
        }



        function markWord(status) {
            if (!currentWordData || !currentWordData.full) return;

            const wordInfo = currentWordData.full.content.word.content;
            let html = "";

            html += `<p><strong>音标：</strong> 美式 [${wordInfo.usphone || ''}] 英式 [${wordInfo.ukphone || ''}]</p>`;

            if (wordInfo.trans && wordInfo.trans.length > 0) {
                html += `<p><strong>中文释义：</strong> ${wordInfo.trans.map(t => t.tranCn).join("；")}</p>`;
            }

            if (wordInfo.sentence && wordInfo.sentence.sentences.length > 0) {
                html += `<p><strong>例句：</strong><br>`;
                wordInfo.sentence.sentences.forEach(s => {
                    html += `${s.sContent}<br><em>${s.sCn}</em><br>`;
                });
                html += `</p>`;
            }

            if (wordInfo.phrase && wordInfo.phrase.phrases.length > 0) {
                html += `<p><strong>短语：</strong><br>`;
                wordInfo.phrase.phrases.forEach(p => {
                    html += `${p.pContent}：${p.pCn}<br>`;
                });
                html += `</p>`;
            }

            if (wordInfo.syno && wordInfo.syno.synos.length > 0) {
                html += `<p><strong>近义词：</strong><br>`;
                wordInfo.syno.synos.forEach(s => {
                    html += `${s.tran}（${s.hwds.map(h => h.w).join(", ")}）<br>`;
                });
                html += `</p>`;
            }

            if (wordInfo.relWord && wordInfo.relWord.rels.length > 0) {
                html += `<p><strong>同根词：</strong><br>`;
                wordInfo.relWord.rels.forEach(r => {
                    html += `<strong>${r.pos}：</strong><br>`;
                    r.words.forEach(w => {
                        html += `${w.hwd}：${w.tran}<br>`;
                    });
                });
                html += `</p>`;
            }

            if (wordInfo.picture) {
                html += `<img src="${wordInfo.picture}" alt="word image" style="max-width: 100%; margin-top: 10px;">`;
            }

            $("#details").html(html);

            // 上传已记/未记状态
            $.post("/mark_word", {
                book: currentBook,
                word: currentWord,
                status: status
            });
        }

        $(document).ready(function() {
            loadBooks();

            $("#book-select").change(function() {
                currentBook = $(this).val();
                fetchWord();
            });

            $("#next").click(fetchWord);
            $("#known").click(() => markWord("known"));
            $("#unknown").click(() => markWord("unknown"));
        });
    </script>
</body>
</html>
